<template>
  <div>
    <header-bar :username="username" @update-username="updateUsername" />
  </div>
  <router-view @update-username="updateUsername" />
  <div>
    <foot-bar />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import HeaderBar from "./components/HeaderBar.vue";
import FootBar from "./components/FootBar.vue";

// 用户名状态管理
const username = ref("用户");

// 初始化时从本地存储读取用户名
onMounted(() => {
  const storedUsername = localStorage.getItem("username");
  if (storedUsername) {
    username.value = storedUsername;
  }
});

// 更新用户名的方法
const updateUsername = (newUsername) => {
  username.value = newUsername;
  localStorage.setItem("username", newUsername);
};
</script>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
